<template>
<div class="header">
  <div class="hd clearfix header-mouted">
     <div class="register-logo fl">
      <slot></slot>
    </div>
    <div class="logon fr" v-if="notLogin">
      <a href="javascript:;" title="登录" @click="dialogFormVisible = true">登录</a>
      <span>|</span>
      <router-link to="/register">注册</router-link>
    </div> 
    <div class="fr mt20" v-else>
      <span class="t3">欢迎您：</span>
       {{person.personName}} |  
       <a href="javascript:;" @click.prevent="logout" class="logout">退出</a>
    </div> 
  </div>
  <el-dialog :visible.sync="dialogFormVisible" custom-class="login-form" :close-on-click-modal="true" :close-on-press-escape="false"> 
    <login-form></login-form>
  </el-dialog>
</div>
</template>
<script>
import LoginForm from '../components/LoginForm'
// const NOT_NEED_LOGIN_URL = ['/', '/register', '/reset-password']
export default {
  props: ['showLogin'],
  data () {
    return {
      dialogFormVisible: false,
      person: JSON.parse(localStorage.person || '{"personName": "匿名"}')
    }
  },
  mounted () {
    // if (NOT_NEED_LOGIN_URL.indexOf(this.$route.path) === -1 && this.notLogin) {
    //   this.dialogFormVisible = true
    // }
  },
  computed: {
    notLogin () {
      return localStorage.accessToken === undefined
    }
  },
  methods: {
    logout () {
      localStorage.removeItem('accessToken')
      localStorage.removeItem('person')
      location.reload()
    }
  },
  components: { LoginForm }
}
</script>
<style lang="less">
@import '../common/css/app.less';
.header {
  background: url(../assets/wall_bg.png) repeat-x;
  .header-mouted {
    padding: 40px 0;
    background: url(../assets/monted.png) no-repeat 600px 24px;
  }
}
body {
  background:#FFF8F1 url(../assets/bg_2.jpg) no-repeat top center;
  background-size: 100%;
}
.logout {
  cursor: pointer;
}
</style>

